<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">Media</h1>
		<div class="entry">
            <p>Media component is a cross browser generic player to embed multimedia content like video and audio to JSF pages. 
                Various formats such as flash, quicktime, windows media, realplayer and pdf are supported.
                Suitable player is discovered using the source extension type and a player can be specified explicitly as well.
                Media component can also play binary media using the StreamedContent API.
            </p>
            
            <p:panelGrid columns="2">
                <h:outputText value="Quicktime" />
                <h:outputText value="aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3pg" />
                
                <h:outputText value="Flash" />
                <h:outputText value="flv, mp3, swf" />
                
                <h:outputText value="Windows Media" />
                <h:outputText value="asx, asf, avi, wma, wmv" />
                
                <h:outputText value="Real Player" />
                <h:outputText value="ra,ram,rm,rpm,rv,smi,smil" />
                
                <h:outputText value="PDF Player" />
                <h:outputText value="pdf" />
            </p:panelGrid>
     
			<h3>Flash</h3>
			<p:media value="http://www.youtube.com/v/KZnUr8lcqjo" width="420" height="315" player="flash"/>
            
            <h3>QuickTime</h3>
			<p:media value="/resources/other/sample-mov.mov" width="190" height="250">
                <f:param name="autoPlay" value="false" />
            </p:media>
			
            <h3>MP3</h3>
            <p:media value="http://www.tulumba.com/mp3/mogollar/yurudukdurmadan/track%2002.mp3" width="200" height="20" player="quicktime">
                <f:param name="autoPlay" value="false" />
            </p:media>
            
            <h3>AVI</h3>
            <p:media value="http://malsup.github.com/video/clear.avi" width="250" height="300">
                <f:param name="autostart" value="false" />
                <p:outputPanel layout="block">
                    Windows Media is required to view this media. <h:outputLink value="http://www.microsoft.com/Windows/MediaPlayer/">Download Here</h:outputLink>
                </p:outputPanel>
            </p:media>
            
            <h3>Real</h3>
            <p:media value="http://service.real.com/learnnav/testrams/realvideo10_56.ram">
                <f:param name="autostart" value="false" />
                <p:outputPanel layout="block">
                    RealPlayer is required to view this media. <h:outputLink value="http://www.real.com/player/">Download Here</h:outputLink>
                </p:outputPanel>
            </p:media>
            
            <h3>PDF</h3>
            <p:media value="/resources/other/guide.pdf" width="100%" height="300px">
                Your browser can't display pdf, <h:outputLink value="/resources/other/guide.pdf">click</h:outputLink> to download pdf instead.
            </p:media>
            
			<h3>Source</h3>
            <p:tabView>
                <p:tab title="media.xhtml">
                    <pre name="code" class="xml">
&lt;h3&gt;Flash&lt;/h3&gt;
&lt;p:media value="http://www.youtube.com/v/KZnUr8lcqjo" width="420" height="315" player="flash"/&gt;

&lt;h3&gt;QuickTime&lt;/h3&gt;
&lt;p:media value="/resources/other/sample-mov.mov" width="190" height="250"&gt;
    &lt;f:param name="autoPlay" value="false" /&gt;
&lt;/p:media&gt;

&lt;h3&gt;MP3&lt;/h3&gt;
&lt;p:media value="http://www.tulumba.com/mp3/mogollar/yurudukdurmadan/track%2002.mp3" width="200" height="20" player="quicktime"&gt;
    &lt;f:param name="autoPlay" value="false" /&gt;
&lt;/p:media&gt;

&lt;h3&gt;AVI&lt;/h3&gt;
&lt;p:media value="http://malsup.github.com/video/clear.avi" width="250" height="300"&gt;
    &lt;f:param name="autostart" value="false" /&gt;
    &lt;p:outputPanel layout="block"&gt;
        Windows Media is required to view this media. &lt;h:outputLink value="http://www.microsoft.com/Windows/MediaPlayer/"&gt;Download Here&lt;/h:outputLink&gt;
    &lt;/p:outputPanel&gt;
&lt;/p:media&gt;

&lt;h3&gt;Real&lt;/h3&gt;
&lt;p:media value="http://service.real.com/learnnav/testrams/realvideo10_56.ram"&gt;
    &lt;f:param name="autostart" value="false" /&gt;
    &lt;p:outputPanel layout="block"&gt;
        RealPlayer is required to view this media. &lt;h:outputLink value="http://www.real.com/player/"&gt;Download Here&lt;/h:outputLink&gt;
    &lt;/p:outputPanel&gt;
&lt;/p:media&gt;

&lt;p:media value="/resources/other/guide.pdf" width="100%" height="300px"&gt;
    Your browser can't display pdf, &lt;h:outputLink value="/resources/other/guide.pdf"&gt;click&lt;/h:outputLink&gt; to download pdf instead.
&lt;/p:media&gt;
                    </pre>	
                </p:tab>
            </p:tabView>
					
      	</div>
 
</ui:define>
</ui:composition>
				